<template>
  <div class="songlist-wrap flex">
    <!-- 歌曲列表 -->
    <el-table
      :data="songsList"
      stripe
      empty-text="暂无歌曲"
      style="width: 100%"
      size="mini"
      @row-dblclick="play1Song"
    >
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop=""
        label=""
        width="40"
        v-if="isShowLike"
      >
        <template>
          <i class="iconfont icon-aixin"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="音乐标题"
        width="220"
      >
      </el-table-column>
      <el-table-column
        prop="ar"
        label="歌手"
        v-if="isShowArtist"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.ar | showArtist }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="al.name"
        label="专辑名"
        v-if="isShowTrackName"
      >
      </el-table-column>
      <el-table-column
        prop="durationTIme"
        label="时长"
      >
        <template v-slot="scope">
          {{ (scope.row.dt / 1000) | durationFormat }}
        </template>
      </el-table-column>
    </el-table>
    <div class="toAll" v-show="songAmount > 10 && isShowAll === false">
      <button class="pointer no-btn mgt-10">
        查看全部{{ songAmount }}首<i class="el-icon-arrow-right"></i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: {
    // 歌曲数组
    songs: Array,
    // 是否展示爱心
    isShowLike: {
      type: Boolean,
      default: true
    },
    isShowArtist: {
      type: Boolean,
      default: true
    },
    isShowTrackName: {
      type: Boolean,
      default: true
    },
    // 要么展示全部,要么展示十首
    isShowAll: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 双击播放单首音乐
    play1Song (row) {
      // console.log(row.id) row.id就是表格选择那行歌曲的id
      // 改了,直接整首歌信息放进去,反正都有请求歌曲信息,直接放,就省了请求
      this.$store.commit('playSingleSong', row)
    }
  },
  computed: {
    songsList () {
      if (this.isShowAll) {
        // 展示全部
        return this.songs
      } else {
        // 展示十首
        return this.songs.slice(0, 10)
      }
    },
    // 歌曲数量,用于判断是否显示"显示全部",大于十首就显示
    songAmount () {
      return this.songs.length
    }

  }
}
</script>

<style lang="less" scoped>
.songlist-wrap {
  flex-direction: column;
}
.el-table {
  width: 100%;
}
.toAll {
  align-self: flex-end;
}
</style>
